<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">

<body style="padding:0;margin:0;font-family: 'Roboto', sans-serif;">
  <table border="0" cellpadding="0" cellspacing="0" id="backgroundTable"
    style="height:auto !important; margin:0; padding:30px 0;font-size:13px; width:800px !important; margin:0px auto; background:#fff;color:#353535;font-family: 'Muli', sans-serif;">
    <tbody>
      <tr>
        <td colspan="2" align="right" style="padding:10px 0;">
          <span
            style="color:#F9210B;text-transform: uppercase;font-size: 1.5rem;line-height: initial;font-weight:bold;">{{ invoice.invoice_number }}</span>
        </td>
      </tr>
      <tr>
        <td align="left" style="padding:15px 0;">

          <address style="line-height:20px;font-style:normal;">

            {% if invoice.from_address.address_line %}
            {{ invoice.from_address.address_line }}<br>
            {% endif %}
            {% if invoice.from_address.street %}
            {{ invoice.from_address.street }},
            {% endif %}
            {% if invoice.from_address.city %}
            {{ invoice.from_address.city }}<br>
            {% endif %}
            {% if invoice.from_address.state %}
            {{ invoice.from_address.state }},
            {% endif %}
            {% if invoice.from_address.postcode %}
            {{ invoice.from_address.postcode }}<br>
            {% endif %}
            {% if invoice.from_address.country %}
            {{ invoice.from_address.country }}
            {% endif %}
          </address>


          {% if invoice.created_on %}

          <div style="margin-top:20px;">
            <strong>Date</strong>
            <p style="margin:2px 0;">{{ invoice.created_on|date:'d-m-Y' }}</p>
          </div>
          {% endif %}

        </td>
        <td align="right" style="padding:15px 0;">
          <ul style="margin:0;padding:0;line-height:20px;">
            <li style="list-style:none;">{{ invoice.email }}</li>
            {% if invoice.name %}
            <li style="list-style:none;">{{ invoice.name }}</li>
            {% endif %}
            {% if invoice.phone %}
            <li style="list-style:none;">{{ invoice.phone }}</li>
            {% endif %}
          </ul>
          <address style="line-height:20px;font-style:normal;">

            {% if invoice.to_address.address_line %}
            {{ invoice.to_address.address_line }}<br>
            {% endif %}
            {% if invoice.to_address.street %}
            {{ invoice.to_address.street }},
            {% endif %}
            {% if invoice.to_address.city %}
            {{ invoice.to_address.city }}<br>
            {% endif %}
            {% if invoice.to_address.state %}
            {{ invoice.to_address.state }},
            {% endif %}
            {% if invoice.to_address.postcode %}
            {{ invoice.to_address.postcode }}<br>
            {% endif %}
            {% if invoice.to_address.country %}
            {{ invoice.to_address.country }}
            {% endif %}
          </address>
          {% if invoice.due_date %}
          <div style="margin-top:20px;">
            <strong>Due Date</strong>
            <p style="margin:2px 0;">{{ invoice.due_date|date:'d-m-Y' }}</p>
          </div>
          {% endif %}
        </td>
      </tr>
      <tr>
        <td colspan="2" style="border-top:1px solid #ddd;padding:10px 0;">
          &nbsp;
        </td>
      </tr>
      <tr>

        <td colspan="2" style="padding:5px 50px;line-height:20px;">
          <center>
            {% if invoice.invoice_title %}
            <div class="content" style="margin-bottom:20px 0;">
              <h1>{{ invoice.invoice_title|upper }}</h2>
            </div>
            {% endif %}
          </center>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="padding:5px 50px;line-height:20px;">
          <center>
            {% if invoice.details %}
            <div class="content" style="margin-bottom:20px 0;">
              <p>{{ invoice.details }}</p>
            </div>
            {% endif %}
          </center>
        </td>

      </tr>
      <tr>
        <td colspan="2">
          <table class="table"
            style="width:100%;border-radius: 5px; background: #f4f8f9; padding: 5px; width: 100%; background: #f4f8f9; display: table; border-collapse: separate; border-spacing: 0 6px; border-radius: 0;">
            <thead style="border-collapse: separate; border-spacing: 0 6px;">
              
            </thead>
            <tbody style="font-size:13px;font-weight:400;">
              
              <tr class="sub_total">
                {% if invoice.quantity %}
                <td colspan="2"
                  style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  <b>Invoice Quantity</b></td>
                <td style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  {{ invoice.quantity }}</td>
                {% endif %}
              </tr>
              <tr class="sub_total">
                {% if invoice.rate %}
                <td colspan="2"
                  style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  <b>Invoice Rate</b></td>
                <td style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  {{ invoice.rate }}</td>
                {% endif %}
              </tr>
              <tr class="sub_total">
                <td colspan="2"
                  style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  <b>Invoice Total</b></td>
                <td style="padding:8px 10px;vertical-align: middle;background: #dedede;font-weight: 800;border: none;">
                  {{ invoice.formatted_total_amount }}</td>
              </tr>
              
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        {% if invoice.footer_text %}
        <td colspan="2" style="padding:20px 50px;line-height:20px;">
          <div class="content" style="margin:20px 0;">
            {{ invoice.footer_text|safe }}
          </div>
        </td>
        {% endif %}
      </tr>
    </tbody>
  </table>
</body>
